<template>
  <div class="popupContainer">
    <!-- 搜索区块 -->
    <van-search
      v-model="searchVal"
      show-action
      shape="round"
      autofocus
      :placeholder="placeholder"
      @search="onSearch"
      @cancel="onCancel"
      @input="onInput"
      
    />
    <!-- 历史记录3 -->
    <historyHot
      v-if="blockShow === 1"
      :historyKeywordList="historyKeywordList"
      :hotKeywordList="hotKeywordList"
      @tagClick="tagClick"
    />

    <myList @cellClick="tagClick" v-else-if="blockShow === 2" :searchProdList="searchProdList" />

    <!-- 商品展示区块1 -->
    <viewProd
      v-else
      :filterCategory="filterCategory"
      :goodsList="goodsList"
      @sendCategoryVal="getCategoryVal"
      @priceChange="priceChange"
    />
  </div>
</template>
<script>
import historyHot from "@/components/HistoryHot/historyHot.vue"; //历史记录组件
import viewProd from "@/components/viewProd/viewProd.vue";
import myList from "@/components/myProdList/myList.vue";
import { GetSearchData, GetProdData, GetProdList } from "@/request/api";
export default {
  data() {
    return {
      placeholder: "",
      searchVal: "", //搜索关键字
      historyKeywordList: [], //历史搜索记录列表
      hotKeywordList: [], //热门搜索记录列表
      //1代表历史区块
      //2代表列表区块
      //3代表产品区块
      blockShow: 1,
      filterCategory: [], //分类过滤数据
      goodsList: [], //商品列表数据
      order: "desc", //价格排序
      categoryId: 0, //分类id
      sort: "id", //排序的方式可是id或price,id是默认的方式
      searchProdList: [], //搜索出来的搜索列表
    };
  },
  created() {
    GetSearchData().then((res) => {
      if (res.errno === 0) {
        let { defaultKeyword, historyKeywordList, hotKeywordList } = res.data;
        this.placeholder = defaultKeyword.keyword;
        this.historyKeywordList = historyKeywordList;
        this.hotKeywordList = hotKeywordList;
      }
    });
  },
  methods: {
    //搜索
    onSearch() {
      let _this = this;
      //请求搜素数据
      //TODO:将viewProd组件中选中的order和categoryId和sort从子传父到popup组件的搜索事件中再次触发搜索
      GetProdData({
        keyword: this.searchVal,
        page: 1,
        size: 20,
        order: _this.order,
        categoryId: _this.categoryId,
        sort: _this.sort,
      }).then((res) => {
        if (res.errno !== 0) return;
        _this.blockShow = 3;

        //解构赋值
        let { filterCategory, goodsList } = res.data;
        //将filterCategory深拷贝一份然后将属性改造 修改某个数组的对象的字段
        let arr = JSON.parse(
          JSON.stringify(filterCategory)
            .replace(/name/g, "text")
            .replace(/id/g, "value")
        );
        _this.filterCategory = arr;
        _this.goodsList = goodsList;
      });
    },
    //取消
    onCancel() {
      //go(-1)跳回上一级
      this.$router.go(-1);
    },
    //从viewProd接受传过来的数据改变分类数据
    getCategoryVal(newVal) {
      this.categoryId = newVal;
      this.onSearch();
    },
    //从viewProd接受传过来的数据改变价格的排序
    priceChange(newVal) {
      //因为是价格排序我们需要改sort的类型为price
      this.order = newVal;
      this.sort = "price";
      this.onSearch();
    },
    //实时搜索
    onInput() {
      //搜索列表区块
      this.blockShow = 2;
      //发送请求
      GetProdList({
        keyword: this.searchVal,
      }).then((res) => {
        if (res.errno === 0) {
          this.searchProdList = res.data;
        }
      });
    },
    //点击标签跳转到商品列表
    tagClick(val) {
      console.log(val);
      this.placeholder = val;
      this.searchVal = val;
      this.onSearch();
    },
  },
  components: {
    historyHot,
    viewProd,
    myList,
  },
};
</script>
<style lang="less" scoped>
.popupContainer {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background-color: #efefef;
  z-index: 99;
}
</style>
